    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伸缩布局-导航</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                width: 800px;
                list-style: none;
                text-align: center;
                display: flex;
                margin: 100px auto;
                border: 1px solid #0b2e13;
            }
            .nav li{
                flex: 1;
                background-color: #ff91bd;
                margin: 0 5px;
                line-height: 50px;
            }
            .layout{
                width: 800px;
                height: 1000px;
                margin: 100px auto;
                border: 1px solid #000;
                flex-direction: column;
                display: flex;
            }
            .layout .header{
                flex: 1;
                background-color: #3bfff6;
            }
            .layout .item{
                flex: 5;
                display: flex;
                background-color: #0A7EC3;
            }
            .item .left{
                flex: 2;
                background-color: #aa5a07;
             }
            .item .right{
                flex: 5;
                background-color: #13d08a;
            }
            .layout .footer{
                flex: 1;
                background-color: #0d4ee2;
            }

        </style>
    </head>
    <body>
    <ul class="nav">
        <li>首页</li>
        <li>导航</li>
        <li>内容</li>
        <li>消息</li>
        <li>我的</li>
        <li>空间</li>
    </ul>
    <div class="layout">
        <div class="header"></div>
        <div class="item">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
    </body>
    </html>